React Development with the Shards React Library — Select and Input Groups

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Form Select

We can add a select dropdown into our React app with Shards React’s FormSelect component.

For instance, we can write:

import React from "react";
import { FormSelect } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <FormSelect>
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third" disabled>
          third
        </option>
      </FormSelect>
    </div>
  );
}

We add the option elements indie the FormSelect to add the options.

The disabled prop disabled the select element.

We can set the size with the size prop:

import React from "react";
import { FormSelect } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <FormSelect size="sm">
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third" disabled>
          third
        </option>
      </FormSelect>
    </div>
  );
}

sm makes it small.

lg makes it large.

And we can add border color to indicate validation status with the valid and invalid props:

import React from "react";
import { FormSelect } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <FormSelect valid>
        <option value="first">first</option>
        <option value="second">second</option>
        <option value="third" disabled>
          third
        </option>
      </FormSelect>
    </div>
  );
}

Text Area

We can add a text area into our React app with the FormTextarea component.

For instance, we can write:

import React, { useState } from "react";
import { FormTextarea } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [text, setText] = useState("abc");

  return (
    <div className="App">
      <FormTextarea value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

We pass in an event handler to the onChange prop to set the text value with setText .

And we set the value of the text area with the value prop.

Input Group

We can add an input group to add inputs with items beside them.

For instance, we can write:

import React from "react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  FormInput
} from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  return (
    <div className="App">
      <InputGroup className="mb-2">
        <InputGroupAddon type="prepend">
          <InputGroupText>$</InputGroupText>
        </InputGroupAddon>
        <FormInput placeholder="Total Amount" />
      </InputGroup>
    </div>
  );
}

We add the InputGroupAddon to add content besides the FormInput .

The type prop is set to prepend to add content to the left of the input.

We can also set type to append to add content to the right of the input.

Input Group Dropdowns

We can add a dropdown beside an input.

For instance, we can write:

import React, { useState } from "react";
import {
  InputGroup,
  FormInput,
  Dropdown,
  DropdownItem,
  DropdownToggle,
  DropdownMenu
} from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [open, setOpen] = useState();
  const toggle = () => {
    setOpen((o) => !o);
  };

  return (
    <div className="App">
      <InputGroup className="mb-2">
        <FormInput />
        <Dropdown addonType="append" open={open} toggle={toggle}>
          <DropdownToggle caret>Dropdown</DropdownToggle>
          <DropdownMenu right>
            <DropdownItem>Action</DropdownItem>
            <DropdownItem>Another action</DropdownItem>
            <DropdownItem>Something else here</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </InputGroup>
    </div>
  );
}

to add a Dropdown beside a FormInput .

Conclusion

We can add input groups and select dropdowns into our React app with Shards React.